<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>表单,文本框和文本域</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="./from&text&textarea.css">
</head>
<body>
    <div class="cells__title">表单</div>
    <div class="cells cells_form">

        <div class="cell">
            <div class="cell__hd"><label class="label">qq</label></div>
            <div class="cell__bd">
                <input class="input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
            </div>
        </div>

        <div class="cell cell_vcode">
            <div class="cell__hd">
                <label class="label">手机号</label>
            </div>
            <div class="cell__bd">
                <input class="input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="cell__ft">
                <button class="vcode-btn">获取验证码</button>
            </div>
        </div>


        <div class="cell">
            <div class="cell__hd"><label for="" class="label">日期</label></div>
            <div class="cell__bd">
                <input class="input" type="date" value=""/>
            </div>
        </div>
        <div class="cell">
            <div class="cell__hd"><label for="" class="label">时间</label></div>
            <div class="cell__bd">
                <input class="input" type="datetime-local" value="" placeholder=""/>
            </div>
        </div>


        <div class="cell cell_vcode">
            <div class="cell__hd"><label class="label">验证码</label></div>
            <div class="cell__bd">
                <input class="input" type="number" placeholder="请输入验证码"/>
            </div>
            <div class="cell__ft">
                <img class="vcode-img" src="../images/vcode.jpg" />
            </div>
        </div>
    </div>
    <div class="cells__tips">底部说明文字底部说明文字</div>

    <link rel="stylesheet" href="../icon.css">
    <div class="cells__title">表单报错</div>
    <div class="cells cells_form">
        <div class="cell cell_warn">
            <div class="cell__hd"><label for="" class="label">卡号</label></div>
            <div class="cell__bd">
                <input class="input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
            </div>
            <div class="cell__ft">
                <i class="icon-warn"></i>
            </div>
        </div>
    </div>
<div>
        <i class="icon-success"></i>成功
    <br><i class="icon-warn"></i>警告
    <br><i class="icon-waiting"></i>等待
    <br><i class="icon-info"></i>提示信息
    <br><i class="icon-success-circle"></i>成功-圆圈
    <br><i class="icon-success-no-circle"></i>成功-无圆圈
    <br><i class="icon-waiting-circle"></i>等待-圆圈
    <br><i class="icon-circle"></i>圆圈
    <br><i class="icon-download"></i>下载
    <br><i class="icon-info-circle"></i>提示信息-圆圈
    <br><i class="icon-success icon-safe-success"></i>安全成功
    <br><i class="icon-warn icon-safe-warn"></i>安全警告
    <br><i class="icon-cancel"></i>取消
    <br><i class="icon-search"></i>搜索
    <br><i class="icon-clear"></i>清除
    <br><i class="icon-delete icon_gallery-delete" style="background-color: #000;"></i>删除
    <br><i class="icon_msg icon-warn"></i>大的警告信息
    <br><i class="icon_msg  icon-success"></i>大的安全提示
    <br><i class="icon_msg icon_msg-primary icon-warn"></i>大的灰色警告
</div>

    <div class="cells__title">文本框</div>
    <div class="cells">
        <div class="cell">
            <div class="cell__bd">
                <input class="input" type="text" placeholder="请输入文本"/>
            </div>
        </div>
    </div>

    <!--使用的时候需要添加js,让文字长度更新-->
    <div class="cells__title">文本域</div>
    <div class="cells cells_form">
        <div class="cell">
            <div class="cell__bd">
                <textarea class="textarea" placeholder="请输入文本" rows="3"></textarea>
                <div class="textarea-counter"><span class="textarea_length">0</span>/200</div>
            </div>
        </div>
    </div>
    <script>
        document.getElementsByClassName("textarea")[0].addEventListener("keyup",function (e) {
            if(this.value.length<=200){
                document.getElementsByClassName("textarea_length")[0].innerHTML=this.value.length;
            }else{
                alert("文字超长")
            }
        })
    </script>
</body>
</html>